<template>
    <div class="container">
        <div class="flex-container">
            <div class="flex-item">
                <el-select v-model="options.mode" placeholder="角色类型选择">
                    <el-option v-for="item in options.modeItems" :key="item.sign" :label="item.name" :value="item.sign" />
                </el-select>
            </div>
        </div>
        <el-table v-loading="dataset.loading" :data="dataset.items" class="el-mb-15" stripe>
            <el-table-column prop="name" label="昵称" />
            <el-table-column prop="groupname" label="用户类型" />
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button @click.native.prevent="editRows( scope.row)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="eventUpdateRequestLimit" @current-change="controllerRequestListDataset"
            :current-page="dataset.page" :page-size="dataset.limit" :total="dataset.total"
            :page-sizes="[10, 50, 100, 200, 300]"
            layout="total, sizes, prev, pager, next, jumper"
        />
        <el-drawer :visible.sync="drawer.show" direction="ltr" size="60%">
            <div class="drawer-container">
                <iframe v-if="drawer.show" :src="drawer.url" class="user-details" />
            </div>
        </el-drawer>
    </div>
</template>

<script>
    import {
        Table, TableColumn, Pagination,
        Button, Select, Option,
        Drawer, Dialog,
        MessageBox, Message
    } from 'element-ui';

    export default {
        components: {
            [Table.name]: Table, [TableColumn.name]: TableColumn, [Pagination.name]: Pagination,
            [Button.name]: Button, [Select.name]: Select, [Option.name]: Option,
            [Drawer.name]: Drawer, [Dialog.name]: Dialog,
        },
        data () {
            return {
                options: {
                    mode: 0,
                    modeItems: [
                        {
                            name: '所有', sign: 0
                        },
                        {
                            name: '门店', sign: 1
                        },
                        {
                            name: '业务员', sign: 2
                        },
                        {
                            name: '暂存点主管', sign: 3
                        },
                        {
                            name: '平台主管', sign: 4
                        },
                        {
                            name: '库管', sign: 5
                        },
                        {
                            name: '会计', sign: 6
                        }
                    ]
                },
                dataset: {
                    loading: false,
                    total: 0, limit: 10, page: 1,
                    items: []
                },
                drawer: {
                    show: false, handle: '',
                    url: '',
                    lastToken: ''
                }
            }
        },
        mounted () {
            this.controllerRequestListDataset();
        },
        methods: {
            editRows(item){
                window.localStorage.setItem("rows",JSON.stringify(item));
                this.$router.push({
                    path:"/organize/role-edit"
                });
                // console.log(item)
            },
            controllerRequestListDataset(page) {
                if(this.dataset.loading) return; else this.dataset.loading = true;
                if(page) this.dataset.page = page;

                var url = '/api/home/user/getlist',
                    params = {
                        page: this.dataset.page - 1, list_rows: this.dataset.limit,
                        groupid: this.options.mode
                    };

                this.$util.postRequestInterface(url, params, {
                    success: (res) => {
                        console.log(res)
                        this.dataset.total = res.data.count;
                        this.dataset.items = res.data.data;
                    },
                    complete: (e) => {
                        this.dataset.loading = false;
                    }
                });
            },
            eventUpdateRequestLimit(limit) {
                if(this.dataset.loading) return;

                this.dataset.limit = limit;
                this.dataset.page = 0;
                this.dataset.total = 0;

                this.controllerRequestListDataset();
            },
            eventOnButtonOperate(mode, index) {
                this.drawer.handle = mode;

                switch(mode) {
                    case 'details':
                        var baseUrl = window.location.protocol + "//" + window.location.hostname,
                            item = this.dataset.items[index],
                            url = '/res/auto-login.html?token=' + this.$store.state.options.user.token;

                        if(window.location.port != 80 || window.location.port) {
                            // baseUrl += ':' + window.location.port;
                            baseUrl += ':' + 8089;
                        }

                        url += '&name=' + item.name;
                        url += '&phone=' + item.phone;
                        url += '&key=' + this.drawer.lastToken;

                        this.drawer.url = baseUrl + url;

                        this.drawer.lastToken = item.token;

                        this.drawer.show = true;
                        break;
                }
            }
        },
        watch: {
            'options.mode'(nVal, oVal) {
                this.options.mode = nVal;

                this.controllerRequestListDataset();
            }
        }
    }
</script>

<style lang="scss" scoped>
    .select-width {
        width: 30vw;
    }

    .drawer-container {
        padding: 3.2rem;
    }

    .user-details {
        width: 414px;
        height: 736px;
    }
</style>
